<template>
  <div class="cq-energize">
    <Title title="科技赋能" imgUrl="title-energize" width="302px" height="79px" alt="科技赋能" />
    <div class="energize-list w1160 flex fz18 jc-between tc">
      <a href="javascript:;">金融行业</a>
      <a href="javascript:;">互联网行业</a>
      <a href="javascript:;">保险行业</a>
      <a href="javascript:;">汽车行业</a>
      <a href="javascript:;">传媒行业</a>
      <a href="javascript:;">通信行业</a>
    </div>
    <div class="swiper-content w1160">
      <ul>
        <li v-for="(item, index) in list" :key="item.title">
          <img :src="$utils.getImg(item.imgName)" width="169" height="42" :alt="item.title" />
          <p class="fz14">{{ item.tip }}</p>
          <div :class="{ 'swiper-active': index === 1 }"></div>
        </li>
      </ul>
      <span class="left">
        <img :src="$utils.getImg('left')" width="30" height="30" alt="left" />
      </span>
      <span class="right">
        <img :src="$utils.getImg('right')" width="30" height="30" alt="right" />
      </span>
    </div>
  </div>
</template>

<script setup>
import Title from './cq-title.vue'
import { ref } from 'vue'
defineOptions({
  name: 'EnergizePage',
  components: {
    Title
  }
})
const list = ref([
  {
    title: '中国联通',
    imgName: 'title-unicom',
    tip: '作为中国的银行卡联合组织，中国银联处于我国银行卡产业的核心和枢纽地位，对我国银行卡产业发展发挥着基础性作用，各银行通过银联跨行交易清算系统。实现了系统间的互联互通，进而使银行卡得以跨银行、跨地区和跨境使用1。'
  },
  {
    title: '中国银联',
    imgName: 'title-unionpay',
    tip: '作为中国的银行卡联合组织，中国银联处于我国银行卡产业的核心和枢纽地位，对我国银行卡产业发展发挥着基础性作用，各银行通过银联跨行交易清算系统。实现了系统间的互联互通，进而使银行卡得以跨银行、跨地区和跨境使用2。'
  },
  {
    title: '腾讯',
    imgName: 'title-Tencent',
    tip: '作为中国的银行卡联合组织，中国银联处于我国银行卡产业的核心和枢纽地位，对我国银行卡产业发展发挥着基础性作用，各银行通过银联跨行交易清算系统。实现了系统间的互联互通，进而使银行卡得以跨银行、跨地区和跨境使用3。'
  }
])
</script>

<style lang="scss" scoped>
.cq-energize {
  padding-top: 82px;
  padding-bottom: 112px;
  background-color: #f8fafd;
  .energize-list {
    padding-top: 69px;
    padding-bottom: 68px;
    a {
      width: 181px;
      height: 50px;
      line-height: 50px;
      color: #333;
      border-radius: 25px;
      border: 1px solid #e5e5e5;
      box-shadow: 0px -1px 21px 0px rgba(192, 192, 192, 0.35);
      &:hover {
        color: #fff;
        background-color: #22a4f1;
      }
    }
  }
  .swiper-content {
    position: relative;
    height: 452px;
    li {
      position: absolute;
      box-sizing: border-box;
      width: 500px;
      background-color: #ffffff;
      box-shadow: 0px -1px 21px 0px rgba(114, 113, 113, 0.3);
      img {
        padding-top: 86px;
      }
      p {
        padding: 60px 40px 0;
        text-indent: 2em;
        text-align: justify;
        line-height: 30px;
        color: #666;
      }
      &:nth-of-type(1) {
        top: 36px;
        left: 54px;
        height: 391px;
        img {
          padding-left: 86px;
        }
      }
      &:nth-of-type(2) {
        top: 0;
        left: 310px;
        height: 452px;
        z-index: 1;
        img {
          padding-left: 166px;
        }
      }
      &:nth-of-type(3) {
        top: 30px;
        right: 56px;
        height: 391px;
        img {
          padding-left: 216px;
        }
      }
    }
    .swiper-active {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 0;
      width: 60px;
      height: 2px;
      background-color: #23aaf2;
    }
    .left {
      position: absolute;
      left: -20px;
      top: 50%;
      padding: 15px;
      transform: translateY(-50%);
      background-color: #d4d5d8;
      border-radius: 50%;
    }
    .right {
      position: absolute;
      right: -20px;
      top: 50%;
      padding: 15px;
      transform: translateY(-50%);
      background-color: #d4d5d8;
      border-radius: 50%;
    }
  }
}
</style>
